<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/urls-and-fetching.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:24 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=common-microsyntaxes.html>← 2.3 Common microsyntaxes</a> — <a href=index.html>Table of Contents</a> — <a href=common-dom-interfaces.html>2.5 Common DOM interfaces →</a></nav><ol class=toc><li><ol><li><a href=urls-and-fetching.html#urls><span class=secno>2.4</span> URLs</a><ol><li><a href=urls-and-fetching.html#terminology-2><span class=secno>2.4.1</span> Terminology</a><li><a href=urls-and-fetching.html#cors-settings-attributes><span class=secno>2.4.2</span> CORS settings attributes</a><li><a href=urls-and-fetching.html#referrer-policy-attributes><span class=secno>2.4.3</span> Referrer policy attributes</a><li><a href=urls-and-fetching.html#nonce-attributes><span class=secno>2.4.4</span> Nonce attributes</a><li><a href=urls-and-fetching.html#lazy-loading-attributes><span class=secno>2.4.5</span> Lazy loading attributes</a><li><a href=urls-and-fetching.html#blocking-attributes><span class=secno>2.4.6</span> Blocking attributes</a><li><a href=urls-and-fetching.html#fetch-priority-attributes><span class=secno>2.4.7</span> Fetch priority attributes</a></ol></ol></ol><h3 id=urls><span class=secno>2.4</span> URLs<a href=#urls class=self-link></a></h3>

  <h4 id=terminology-2><span class=secno>2.4.1</span> Terminology<a href=#terminology-2 class=self-link></a></h4>

  <p>A string is a <dfn id=valid-non-empty-url>valid non-empty URL</dfn> if it is a <a id=terminology-2:valid-url-string href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>valid URL string</a> but it is
  not the empty string.</p>

  <p>A string is a <dfn id=valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by spaces</dfn> if, after <a href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace id=terminology-2:strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>stripping leading and trailing ASCII
  whitespace</a> from it, it is a <a id=terminology-2:valid-url-string-2 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>valid URL string</a>.</p>

  <p>A string is a <dfn id=valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</dfn> if, after <a href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace id=terminology-2:strip-leading-and-trailing-ascii-whitespace-2 data-x-internal=strip-leading-and-trailing-ascii-whitespace>stripping leading and trailing ASCII
  whitespace</a> from it, it is a <a href=#valid-non-empty-url id=terminology-2:valid-non-empty-url>valid non-empty URL</a>.</p>

  <hr>

  <p>This specification defines the URL <dfn id=about:legacy-compat><code>about:legacy-compat</code></dfn> as a reserved,
  though unresolvable, <code id=terminology-2:about-protocol><a data-x-internal=about-protocol href=https://www.rfc-editor.org/rfc/rfc6694#section-2>about:</a></code> URL, for use in <a href=syntax.html#syntax-doctype id=terminology-2:syntax-doctype>DOCTYPE</a>s in <a id=terminology-2:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a> when needed for
  compatibility with XML tools. <a href=references.html#refsABOUT>[ABOUT]</a></p>

  <p>This specification defines the URL <dfn id=about:html-kind><code>about:html-kind</code></dfn> as a reserved,
  though unresolvable, <code id=terminology-2:about-protocol-2><a data-x-internal=about-protocol href=https://www.rfc-editor.org/rfc/rfc6694#section-2>about:</a></code> URL, that is used as an
  identifier for kinds of media tracks. <a href=references.html#refsABOUT>[ABOUT]</a></p>

  <p>This specification defines the URL <dfn id=about:srcdoc><code>about:srcdoc</code></dfn> as a reserved, though
  unresolvable, <code id=terminology-2:about-protocol-3><a data-x-internal=about-protocol href=https://www.rfc-editor.org/rfc/rfc6694#section-2>about:</a></code> URL, that is used as the <a href=https://dom.spec.whatwg.org/#concept-document-url id="terminology-2:the-document's-address" data-x-internal="the-document's-address">URL</a> of <a href=iframe-embed-object.html#an-iframe-srcdoc-document id=terminology-2:an-iframe-srcdoc-document><code>iframe</code> <code>srcdoc</code> documents</a>.
  <a href=references.html#refsABOUT>[ABOUT]</a></p>

  <hr>

  <p>A <a id=terminology-2:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <dfn id=matches-about:blank>matches <code>about:blank</code></dfn> if its <a href=https://url.spec.whatwg.org/#concept-url-scheme id=terminology-2:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is "<code>about</code>", its <a href=https://url.spec.whatwg.org/#concept-url-path id=terminology-2:concept-url-path data-x-internal=concept-url-path>path</a> contains a single string "<code>blank</code>", its
  <a href=https://url.spec.whatwg.org/#concept-url-username id=terminology-2:concept-url-username data-x-internal=concept-url-username>username</a> and <a href=https://url.spec.whatwg.org/#concept-url-password id=terminology-2:concept-url-password data-x-internal=concept-url-password>password</a> are the empty string, and its <a href=https://url.spec.whatwg.org/#concept-url-host id=terminology-2:concept-url-host data-x-internal=concept-url-host>host</a> is null.</p>

  <p class=note>Such a URL's <a href=https://url.spec.whatwg.org/#concept-url-query id=terminology-2:concept-url-query data-x-internal=concept-url-query>query</a> and <a href=https://url.spec.whatwg.org/#concept-url-fragment id=terminology-2:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> can be non-null. For example, the <a id=terminology-2:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL
  record</a> created by <a href=https://url.spec.whatwg.org/#concept-url-parser id=terminology-2:url-parser data-x-internal=url-parser>parsing</a> "<code>about:blank?foo#bar</code>" <a href=#matches-about:blank id=terminology-2:matches-about:blank>matches <code>about:blank</code></a>.</p>

  <p>A <a id=terminology-2:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <dfn id=matches-about:srcdoc>matches <code>about:srcdoc</code></dfn> if its <a href=https://url.spec.whatwg.org/#concept-url-scheme id=terminology-2:concept-url-scheme-2 data-x-internal=concept-url-scheme>scheme</a> is "<code>about</code>", its <a href=https://url.spec.whatwg.org/#concept-url-path id=terminology-2:concept-url-path-2 data-x-internal=concept-url-path>path</a> contains a single string "<code>srcdoc</code>",
  its <a href=https://url.spec.whatwg.org/#concept-url-query id=terminology-2:concept-url-query-2 data-x-internal=concept-url-query>query</a> is null, its <a href=https://url.spec.whatwg.org/#concept-url-username id=terminology-2:concept-url-username-2 data-x-internal=concept-url-username>username</a> and <a href=https://url.spec.whatwg.org/#concept-url-password id=terminology-2:concept-url-password-2 data-x-internal=concept-url-password>password</a> are the empty string, and its <a href=https://url.spec.whatwg.org/#concept-url-host id=terminology-2:concept-url-host-2 data-x-internal=concept-url-host>host</a> is null.</p>

  <p class=note>The reason that <a href=#matches-about:srcdoc id=terminology-2:matches-about:srcdoc>matches <code>about:srcdoc</code></a> ensures that the
  <a id=terminology-2:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=terminology-2:concept-url-query-3 data-x-internal=concept-url-query>query</a> is null is because it is not
  possible to create <a href=iframe-embed-object.html#an-iframe-srcdoc-document id=terminology-2:an-iframe-srcdoc-document-2>an <code>iframe</code> <code>srcdoc</code> document</a> whose <a href=https://dom.spec.whatwg.org/#concept-document-url id="terminology-2:the-document's-address-2" data-x-internal="the-document's-address">URL</a> has a non-null <a href=https://url.spec.whatwg.org/#concept-url-query id=terminology-2:concept-url-query-4 data-x-internal=concept-url-query>query</a>, unlike <code>Document</code>s whose <a href=https://dom.spec.whatwg.org/#concept-document-url id="terminology-2:the-document's-address-3" data-x-internal="the-document's-address">URL</a> <a href=#matches-about:blank id=terminology-2:matches-about:blank-2>matches <code>about:blank</code></a>. In other
  words, the set of all <a id=terminology-2:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>s that <a href=#matches-about:srcdoc id=terminology-2:matches-about:srcdoc-2>match
  <code>about:srcdoc</code></a> only vary in their <a href=https://url.spec.whatwg.org/#concept-url-fragment id=terminology-2:concept-url-fragment-2 data-x-internal=concept-url-fragment>fragment</a>.</p>


  



  


  


  <h4 id=cors-settings-attributes><span class=secno>2.4.2</span> CORS settings attributes<a href=#cors-settings-attributes class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin title="The crossorigin attribute, valid on the <audio>, <img>, <link>, <script>, and <video> elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.">Attributes/crossorigin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>8+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>13+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>A <dfn id=cors-settings-attribute>CORS settings attribute</dfn> is an <a id=cors-settings-attributes:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following
  keywords and states:</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn data-dfn-for=audio/crossorigin,video/crossorigin,img/crossorigin,link/crossorigin,script/crossorigin id=attr-crossorigin-anonymous-keyword data-dfn-type=attr-value><code>anonymous</code></dfn>
     <td rowspan=2><dfn id=attr-crossorigin-anonymous>Anonymous</dfn>
     <td rowspan=2><a href=https://fetch.spec.whatwg.org/#concept-request id=cors-settings-attributes:concept-request data-x-internal=concept-request>Requests</a> for the element will have their
     <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=cors-settings-attributes:concept-request-mode data-x-internal=concept-request-mode>mode</a> set to "<code>cors</code>" and their
     <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=cors-settings-attributes:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> set to "<code>same-origin</code>".
    <tr><td>(the empty string)
    <tr><td><dfn data-dfn-for=audio/crossorigin,video/crossorigin,img/crossorigin,link/crossorigin,script/crossorigin id=attr-crossorigin-use-credentials-keyword data-dfn-type=attr-value><code>use-credentials</code></dfn>
     <td><dfn id=attr-crossorigin-use-credentials>Use Credentials</dfn>
     <td><a href=https://fetch.spec.whatwg.org/#concept-request id=cors-settings-attributes:concept-request-2 data-x-internal=concept-request>Requests</a> for the element will have their <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=cors-settings-attributes:concept-request-mode-2 data-x-internal=concept-request-mode>mode</a> set to "<code>cors</code>" and their <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=cors-settings-attributes:concept-request-credentials-mode-2 data-x-internal=concept-request-credentials-mode>credentials mode</a> set to "<code>include</code>".
  </table>

  <p>The attribute's <i id=cors-settings-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> is the <dfn id=attr-crossorigin-none>No CORS</dfn> state, and its <i id=cors-settings-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> is the <a href=#attr-crossorigin-anonymous id=cors-settings-attributes:attr-crossorigin-anonymous>Anonymous</a> state.</p>

  <p>The majority of fetches governed by <a href=#cors-settings-attribute id=cors-settings-attributes:cors-settings-attribute>CORS settings
  attributes</a> will be done via the <span>create a potential-CORS request</span> algorithm.</p>

  <p id=module-script-credentials-mode>For more modern features, where the request's <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=cors-settings-attributes:concept-request-mode-3 data-x-internal=concept-request-mode>mode</a> is always "<code>cors</code>", certain <a href=#cors-settings-attribute id=cors-settings-attributes:cors-settings-attribute-2>CORS settings attributes</a> have been repurposed to have a
  slightly different meaning, wherein they only impact the <a href=https://fetch.spec.whatwg.org/#concept-request id=cors-settings-attributes:concept-request-3 data-x-internal=concept-request>request</a>'s <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=cors-settings-attributes:concept-request-credentials-mode-3 data-x-internal=concept-request-credentials-mode>credentials mode</a>. To perform this translation, we
  define the <dfn id=cors-settings-attribute-credentials-mode data-export="">CORS settings attribute credentials mode</dfn> for a given <a href=#cors-settings-attribute id=cors-settings-attributes:cors-settings-attribute-3>CORS
  settings attribute</a> to be determined by switching on the attribute's state:</p>

  <dl class=switch><dt><a href=#attr-crossorigin-none id=cors-settings-attributes:attr-crossorigin-none>No CORS</a><dt><a href=#attr-crossorigin-anonymous id=cors-settings-attributes:attr-crossorigin-anonymous-2>Anonymous</a><dd>"<code>same-origin</code>"<dt><a href=#attr-crossorigin-none id=cors-settings-attributes:attr-crossorigin-none-2>Use Credentials</a><dd>"<code>include</code>"</dl>


  <h4 id=referrer-policy-attributes><span class=secno>2.4.3</span> Referrer policy attributes<a href=#referrer-policy-attributes class=self-link></a></h4>

  <p>A <dfn id=referrer-policy-attribute data-export="">referrer policy attribute</dfn> is an <a id=referrer-policy-attributes:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a>.  Each
  <a id=referrer-policy-attributes:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>, including the empty string, is a keyword for this attribute, mapping
  to a state of the same name.</p>

  <p>The attribute's <i id=referrer-policy-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=referrer-policy-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the empty string state.</p>

  <p>The impact of these states on the processing model of various <a href=https://fetch.spec.whatwg.org/#concept-fetch id=referrer-policy-attributes:concept-fetch data-x-internal=concept-fetch>fetches</a> is defined in more detail throughout this specification, in
  <cite>Fetch</cite>, and in <cite>Referrer Policy</cite>. <a href=references.html#refsFETCH>[FETCH]</a>
  <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <div class=note>
   <p>Several signals can contribute to which processing model is used for a given <a href=https://fetch.spec.whatwg.org/#concept-fetch id=referrer-policy-attributes:concept-fetch-2 data-x-internal=concept-fetch>fetch</a>; a <a href=#referrer-policy-attribute id=referrer-policy-attributes:referrer-policy-attribute>referrer policy attribute</a> is only one of
   them. In general, the order in which these signals are processed are:</p>

   <ol><li><p>First, the presence of a <code id=referrer-policy-attributes:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code> link
    type;<li><p>Then, the value of a <a href=#referrer-policy-attribute id=referrer-policy-attributes:referrer-policy-attribute-2>referrer policy attribute</a>;<li><p>Then, the presence of any <code id=referrer-policy-attributes:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> element with <code id=referrer-policy-attributes:attr-meta-name><a href=semantics.html#attr-meta-name>name</a></code> attribute set to <code id=referrer-policy-attributes:meta-referrer><a href=semantics.html#meta-referrer>referrer</a></code>.<li><p>Finally, the `<code id=referrer-policy-attributes:http-referrer-policy><a data-x-internal=http-referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-header-dfn>Referrer-Policy</a></code>` HTTP
    header.</ol>
  </div>

  <h4 id=nonce-attributes><span class=secno>2.4.4</span> Nonce attributes<a href=#nonce-attributes class=self-link></a></h4>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce title="The nonce global attribute is a content attribute defining a cryptographic nonce (&quot;number used once&quot;) which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed for a given element.">Global_attributes/nonce</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>Yes</span></span><span class="chrome yes"><span>Chrome</span><span>Yes</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>Yes</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>A <dfn data-dfn-for=htmlsvg-global id=attr-nonce data-dfn-type=element-attr><code>nonce</code></dfn> content
  attribute represents a cryptographic nonce ("number used once") which can be used by <cite>Content
  Security Policy</cite> to determine whether or not a given fetch will be allowed to proceed. The
  value is text. <a href=references.html#refsCSP>[CSP]</a></p>

  <p>Elements that have a <code id=nonce-attributes:attr-nonce><a href=#attr-nonce>nonce</a></code> content attribute ensure that the
  cryptographic nonce is only exposed to script (and not to side-channels like CSS attribute
  selectors) by taking the value from the content attribute, moving it into an internal slot
  named <dfn data-dfn-for=HTMLOrSVGElement id=cryptographicnonce data-dfn-type=attribute>[[CryptographicNonce]]</dfn>, exposing it to script
  via the <code>HTMLOrSVGElement</code> interface mixin, and setting the content attribute to the
  empty string. Unless otherwise specified, the slot's value is the empty string.</p>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-noncedelement-nonce id=dom-htmlorsvgelement-nonce>nonce</a></code><dd><p>Returns the value set for <var>element</var>'s cryptographic nonce. If the setter was not
   used, this will be the value originally found in the <code id=nonce-attributes:attr-nonce-2><a href=#attr-nonce>nonce</a></code>
   content attribute.<dt><code><var>element</var>.<a href=#dom-noncedelement-nonce id=nonce-attributes:dom-noncedelement-nonce>nonce</a> = <var>value</var></code><dd><p>Updates <var>element</var>'s cryptographic nonce value.</dl>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce title="The nonce property of the HTMLElement interface returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.">HTMLElement/nonce</a><div class=support><span class="firefox yes"><span>Firefox</span><span>75+</span></span><span class="safari yes"><span>Safari</span><span title="Partial implementation.">🔰 10+</span></span><span class="chrome yes"><span>Chrome</span><span>61+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLOrSVGElement id=dom-noncedelement-nonce data-dfn-type=attribute><code>nonce</code></dfn> IDL attribute must, on getting, return the
  value of this element's <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce>[[CryptographicNonce]]</a>; and on setting, set this element's
  <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-2>[[CryptographicNonce]]</a> to the given value.</p>

  <p id=nonce-does-not-update-dom class=note><a href=#nonce-does-not-update-dom class=self-link></a>Note how the setter for the <code id=nonce-attributes:dom-noncedelement-nonce-2><a href=#dom-noncedelement-nonce>nonce</a></code> IDL attribute does not update the corresponding
  content attribute. This, as well as the below setting of the <code id=nonce-attributes:attr-nonce-3><a href=#attr-nonce>nonce</a></code> content attribute to the empty string when an element
  <a id=nonce-attributes:becomes-browsing-context-connected href=infrastructure.html#becomes-browsing-context-connected>becomes browsing-context connected</a>, is meant to prevent exfiltration of the nonce
  value through mechanisms that can easily read content attributes, such as selectors. Learn more in
  <a href=https://github.com/whatwg/html/issues/2369>issue #2369</a>, where this behavior was
  introduced.</p>

  <p>The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=nonce-attributes:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change
  steps</a> are used for the <code id=nonce-attributes:attr-nonce-4><a href=#attr-nonce>nonce</a></code> content attribute:

  <ol><li><p>If <var>element</var> does not <a id=nonce-attributes:include href=https://webidl.spec.whatwg.org/#include data-x-internal=include>include</a> <code>HTMLOrSVGElement</code>, then
   return.<li><p>If <var>localName</var> is not <code id=nonce-attributes:attr-nonce-5><a href=#attr-nonce>nonce</a></code> or
   <var>namespace</var> is not null, then return.<li><p>If <var>value</var> is null, then set <var>element</var>'s
   <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-3>[[CryptographicNonce]]</a> to the empty string.<li><p>Otherwise, set <var>element</var>'s <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-4>[[CryptographicNonce]]</a> to
   <var>value</var>.</ol>

  <p>Whenever an element <a href=https://webidl.spec.whatwg.org/#include id=nonce-attributes:include-2 data-x-internal=include>including</a> <code>HTMLOrSVGElement</code>
  <a id=nonce-attributes:becomes-browsing-context-connected-2 href=infrastructure.html#becomes-browsing-context-connected>becomes browsing-context connected</a>, the user agent must execute the following steps
  on the <var>element</var>:</p>

  <ol><li><p>Let <var>CSP list</var> be <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-shadow-including-root id=nonce-attributes:shadow-including-root data-x-internal=shadow-including-root>shadow-including root</a>'s <a href=dom.html#concept-document-policy-container id=nonce-attributes:concept-document-policy-container>policy
   container</a>'s <span>CSP list</span>.<li>
    <p>If <var>CSP list</var> <a id=nonce-attributes:contains-a-header-delivered-content-security-policy href=https://w3c.github.io/webappsec-csp/#contains-a-header-delivered-content-security-policy data-x-internal=contains-a-header-delivered-content-security-policy>contains a header-delivered Content Security Policy</a>, and
    <var>element</var> has a <code id=nonce-attributes:attr-nonce-6><a href=#attr-nonce>nonce</a></code> content attribute
    whose value is not the empty string, then:</p>

    <ol><li><p>Let <var>nonce</var> be <var>element</var>'s
     <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-5>[[CryptographicNonce]]</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=nonce-attributes:concept-element-attributes-set-value data-x-internal=concept-element-attributes-set-value>Set an attribute value</a> for
     <var>element</var> using "<code id=nonce-attributes:attr-nonce-7><a href=#attr-nonce>nonce</a></code>" and the empty
     string.<li><p>Set <var>element</var>'s <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-6>[[CryptographicNonce]]</a> to
     <var>nonce</var>.</ol>

    <p class=note>If <var>element</var>'s <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-7>[[CryptographicNonce]]</a> were not restored it
    would be the empty string at this point.</p>
   </ol>

  <p>The <a href=https://dom.spec.whatwg.org/#concept-node-clone-ext id=nonce-attributes:concept-node-clone-ext data-x-internal=concept-node-clone-ext>cloning steps</a> for elements that
  <a id=nonce-attributes:include-3 href=https://webidl.spec.whatwg.org/#include data-x-internal=include>include</a> <code>HTMLOrSVGElement</code> given <var>node</var>, <var>copy</var>, and
  <var>subtree</var> are to set <var>copy</var>'s <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-8>[[CryptographicNonce]]</a> to
  <var>node</var>'s <a href=#cryptographicnonce id=nonce-attributes:cryptographicnonce-9>[[CryptographicNonce]]</a>.</p>

  <h4 id=lazy-loading-attributes><span class=secno>2.4.5</span> Lazy loading attributes<a href=#lazy-loading-attributes class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading title="Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.">Lazy_loading</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>75+</span></span><span class="safari yes"><span>Safari</span><span>15.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>A <dfn id=lazy-loading-attribute>lazy loading attribute</dfn> is an <a id=lazy-loading-attributes:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following
  keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=img/loading,iframe/loading id=attr-loading-lazy data-dfn-type=attr-value><code>lazy</code></dfn>
     <td><dfn id=attr-loading-lazy-state>Lazy</dfn>
     <td>Used to defer fetching a resource until some conditions are met.
    <tr><td><dfn data-dfn-for=img/loading,iframe/loading id=attr-loading-eager data-dfn-type=attr-value><code>eager</code></dfn>
     <td><dfn id=attr-loading-eager-state>Eager</dfn>
     <td>Used to fetch a resource immediately; the default state.
  </table>

  <p>The attribute directs the user agent to fetch a resource immediately or to defer fetching until
  some conditions associated with the element are met, according to the attribute's current
  state.</p>

  <p>The attribute's <i id=lazy-loading-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=lazy-loading-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-loading-eager-state id=lazy-loading-attributes:attr-loading-eager-state>Eager</a> state.</p>

  <hr>

  <p>The <dfn id=will-lazy-load-element-steps>will lazy load element steps</dfn>, given an element <var>element</var>,
  are as follows:</p>

  <ol><li>
    <p>If <span>scripting is disabled</span> for <var>element</var>,
    then return false.</p>

    <p class=note>This is an anti-tracking measure, because if a user agent supported lazy loading
    when scripting is disabled, it would still be possible for a site to track a user's approximate
    scroll position throughout a session, by strategically placing images in a page's markup such
    that a server can track how many images are requested and when.</p>
   <li><p>If <var>element</var>'s <a href=#lazy-loading-attribute id=lazy-loading-attributes:lazy-loading-attribute>lazy loading attribute</a> is in the <a href=#attr-loading-lazy-state id=lazy-loading-attributes:attr-loading-lazy-state>Lazy</a> state, then return true.<li><p>Return false.</ol>

  <p>Each <code id=lazy-loading-attributes:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> and <code id=lazy-loading-attributes:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element has associated <dfn id=lazy-load-resumption-steps>lazy load resumption
  steps</dfn>, initially null.</p>

  <p class=note>For <code id=lazy-loading-attributes:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> and <code id=lazy-loading-attributes:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> elements that <a href=#will-lazy-load-element-steps id=lazy-loading-attributes:will-lazy-load-element-steps>will lazy load</a>, these steps are run from the <a href=#lazy-load-intersection-observer id=lazy-loading-attributes:lazy-load-intersection-observer>lazy load
  intersection observer</a>'s callback or when their <a href=#lazy-loading-attribute id=lazy-loading-attributes:lazy-loading-attribute-2>lazy loading attribute</a> is set
  to the <a href=#attr-loading-eager-state id=lazy-loading-attributes:attr-loading-eager-state-2>Eager</a> state. This causes the element to
  continue loading.</p>

  <p>Each <code>Document</code> has a <dfn id=lazy-load-intersection-observer>lazy load intersection observer</dfn>, initially set to
  null but can be set to an <code id=lazy-loading-attributes:intersectionobserver><a data-x-internal=intersectionobserver href=https://w3c.github.io/IntersectionObserver/#intersectionobserver>IntersectionObserver</a></code> instance.</p>

  <p>To <dfn id=start-intersection-observing-a-lazy-loading-element>start intersection-observing a lazy loading element</dfn> <var>element</var>, run these
  steps:</p>

  <ol><li><p>Let <var>doc</var> be <var>element</var>'s <a id=lazy-loading-attributes:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>
    <p>If <var>doc</var>'s <a href=#lazy-load-intersection-observer id=lazy-loading-attributes:lazy-load-intersection-observer-2>lazy load intersection observer</a> is null, set it to a new
    <code id=lazy-loading-attributes:intersectionobserver-2><a data-x-internal=intersectionobserver href=https://w3c.github.io/IntersectionObserver/#intersectionobserver>IntersectionObserver</a></code> instance, initialized as follows:</p>

    <p class=XXX>The intention is to use the original value of the
    <code id=lazy-loading-attributes:intersectionobserver-3><a data-x-internal=intersectionobserver href=https://w3c.github.io/IntersectionObserver/#intersectionobserver>IntersectionObserver</a></code> constructor. However, we're forced to use the
    JavaScript-exposed constructor in this specification, until <cite>Intersection Observer</cite>
    exposes low-level hooks for use in specifications. See bug <a href=https://github.com/w3c/IntersectionObserver/issues/464>w3c/IntersectionObserver#464</a>
    which tracks this. <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a></p>

    <ul><li>
      <p>The <var>callback</var> is these steps, with arguments <var>entries</var> and
      <var>observer</var>:</p>

      <ol><li>
        <p>For each <var>entry</var> in <var>entries</var> <span class=XXX>using a method of
        iteration which does not trigger developer-modifiable array accessors or
        iteration hooks</span>:</p>

        <ol><li><p>Let <var>resumptionSteps</var> be null.<li><p>If <var>entry</var>.<code id=lazy-loading-attributes:dom-intersectionobserverentry-isintersecting><a data-x-internal=dom-intersectionobserverentry-isintersecting href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-isintersecting>isIntersecting</a></code> is true, then
         set <var>resumptionSteps</var> to <var>entry</var>.<code id=lazy-loading-attributes:dom-intersectionobserverentry-target><a data-x-internal=dom-intersectionobserverentry-target href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-target>target</a></code>'s
         <a href=#lazy-load-resumption-steps id=lazy-loading-attributes:lazy-load-resumption-steps>lazy load resumption steps</a>.<li><p>If <var>resumptionSteps</var> is null, then return.<li><p><a href=#stop-intersection-observing-a-lazy-loading-element id=lazy-loading-attributes:stop-intersection-observing-a-lazy-loading-element>Stop intersection-observing a lazy loading element</a> for
         <var>entry</var>.<code id=lazy-loading-attributes:dom-intersectionobserverentry-target-2><a data-x-internal=dom-intersectionobserverentry-target href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-target>target</a></code>.<li><p>Set <var>entry</var>.<code id=lazy-loading-attributes:dom-intersectionobserverentry-target-3><a data-x-internal=dom-intersectionobserverentry-target href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-target>target</a></code>'s <a href=#lazy-load-resumption-steps id=lazy-loading-attributes:lazy-load-resumption-steps-2>lazy load resumption
         steps</a> to null.<li><p>Invoke <var>resumptionSteps</var>.</ol>

        <p class=XXX>The intention is to use the original value of the
        <code id=lazy-loading-attributes:dom-intersectionobserverentry-isintersecting-2><a data-x-internal=dom-intersectionobserverentry-isintersecting href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-isintersecting>isIntersecting</a></code> and
        <code id=lazy-loading-attributes:dom-intersectionobserverentry-target-4><a data-x-internal=dom-intersectionobserverentry-target href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-target>target</a></code> getters. See <a href=https://github.com/w3c/IntersectionObserver/issues/464>w3c/IntersectionObserver#464</a>.
        <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a></p>
       </ol>
     <li>
      <p>The <var>options</var> is an <code id=lazy-loading-attributes:intersectionobserverinit><a data-x-internal=intersectionobserverinit href=https://w3c.github.io/IntersectionObserver/#dictdef-intersectionobserverinit>IntersectionObserverInit</a></code> dictionary with the
      following dictionary members: «[ "<code>scrollMargin</code>" → <a href=#lazy-load-root-margin id=lazy-loading-attributes:lazy-load-root-margin>lazy load scroll
      margin</a> ]»</p>

      <p class=note>This allows for fetching the image during scrolling, when it does not yet —
      but is about to — intersect the viewport.</p>

      <p class=XXX>The <a href=#lazy-load-root-margin id=lazy-loading-attributes:lazy-load-root-margin-2>lazy load scroll margin</a> suggestions imply dynamic changes to the
      value, but the <code id=lazy-loading-attributes:intersectionobserver-4><a data-x-internal=intersectionobserver href=https://w3c.github.io/IntersectionObserver/#intersectionobserver>IntersectionObserver</a></code> API does not support changing the scroll
      margin. See issue <a href=https://github.com/w3c/IntersectionObserver/issues/428>w3c/IntersectionObserver#428</a>.</p>
     </ul>
   <li>
    <p>Call <var>doc</var>'s <a href=#lazy-load-intersection-observer id=lazy-loading-attributes:lazy-load-intersection-observer-3>lazy load intersection observer</a>'s <code id=lazy-loading-attributes:dom-intersectionobserver-observe><a data-x-internal=dom-intersectionobserver-observe href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-observe>observe</a></code> method with <var>element</var> as the
    argument.</p>

    <p class=XXX>The intention is to use the original value of the <code id=lazy-loading-attributes:dom-intersectionobserver-observe-2><a data-x-internal=dom-intersectionobserver-observe href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-observe>observe</a></code> method. See <a href=https://github.com/w3c/IntersectionObserver/issues/464>w3c/IntersectionObserver#464</a>.
    <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a></p>
   </ol>

  <p>To <dfn id=stop-intersection-observing-a-lazy-loading-element>stop intersection-observing a lazy loading element</dfn> <var>element</var>, run these
  steps:</p>

  <ol><li><p>Let <var>doc</var> be <var>element</var>'s <a id=lazy-loading-attributes:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p><a id=lazy-loading-attributes:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>doc</var>'s <a href=#lazy-load-intersection-observer id=lazy-loading-attributes:lazy-load-intersection-observer-4>lazy load intersection observer</a> is not
   null.<li>
    <p>Call <var>doc</var>'s <a href=#lazy-load-intersection-observer id=lazy-loading-attributes:lazy-load-intersection-observer-5>lazy load intersection observer</a>'s <code id=lazy-loading-attributes:dom-intersectionobserver-unobserve><a data-x-internal=dom-intersectionobserver-unobserve href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-unobserve>unobserve</a></code> method with <var>element</var> as
    the argument.</p>

    <p class=XXX>The intention is to use the original value of the <code id=lazy-loading-attributes:dom-intersectionobserver-unobserve-2><a data-x-internal=dom-intersectionobserver-unobserve href=https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-unobserve>unobserve</a></code> method. See <a href=https://github.com/w3c/IntersectionObserver/issues/464>w3c/IntersectionObserver#464</a>.
    <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a></p>
   </ol>

  <p>
  
  The <dfn id=lazy-load-root-margin>lazy load scroll margin</dfn> is an
  <a id=lazy-loading-attributes:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> value, but with the following suggestions to consider:</p>

  <ul><li><p>Set a minimum value that most often results in the resources being loaded before they
   intersect the viewport under normal usage patterns for the given device.<li><p>The typical scrolling speed: increase the value for devices with faster typical scrolling
   speeds.<li><p>The current scrolling speed or momentum: the UA can attempt to predict where the scrolling
   will likely stop, and adjust the value accordingly.<li><p>The network quality: increase the value for slow or high-latency connections.<li><p>User preferences can influence the value.</ul>

  <p class=note>It is important <a href=https://infra.spec.whatwg.org/#tracking-vector id=lazy-loading-attributes:tracking-vector data-x-internal=tracking-vector>for privacy</a> that the
  <a href=#lazy-load-root-margin id=lazy-loading-attributes:lazy-load-root-margin-3>lazy load scroll margin</a> not leak additional information. For example, the typical
  scrolling speed on the current device could be imprecise so as to not introduce a new
  fingerprinting vector.</p>

  <h4 id=blocking-attributes><span class=secno>2.4.6</span> Blocking attributes<a href=#blocking-attributes class=self-link></a></h4>

  <p>A <dfn id=blocking-attribute>blocking attribute</dfn> explicitly indicates that certain operations should be blocked
  on the fetching of an external resource. The operations that can be blocked are represented by
  <dfn id=possible-blocking-token>possible blocking tokens</dfn>, which are strings listed by
  the following table:</p>

  <table><thead><tr><th>Possible blocking token
     <th>Description
   <tbody><tr><td>"<dfn id=blocking-token-render><code>render</code></dfn>"
     <td>The element is <a href=#potentially-render-blocking id=blocking-attributes:potentially-render-blocking>potentially render-blocking</a>.
  </table>


  <p id=future-blocking-tokens class=note><a href=#future-blocking-tokens class=self-link></a>In the future, there might be more <a href=#possible-blocking-token id=blocking-attributes:possible-blocking-token>possible blocking tokens</a>.</p>

  <p>A <a href=#blocking-attribute id=blocking-attributes:blocking-attribute>blocking attribute</a> must have a value that is an <a id=blocking-attributes:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique
  space-separated tokens</a>, each of which are <a href=#possible-blocking-token id=blocking-attributes:possible-blocking-token-2>possible
  blocking tokens</a>. The <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=blocking-attributes:concept-supported-tokens data-x-internal=concept-supported-tokens>supported tokens</a> of a
  <a href=#blocking-attribute id=blocking-attributes:blocking-attribute-2>blocking attribute</a> are the <a href=#possible-blocking-token id=blocking-attributes:possible-blocking-token-3>possible blocking
  tokens</a>. Any element can have at most one <a href=#blocking-attribute id=blocking-attributes:blocking-attribute-3>blocking attribute</a>.</p>

  <p>The <dfn id=blocking-tokens-set>blocking tokens set</dfn> for an element <var>el</var> are the result of the
  following steps:</p>

  <ol><li><p>Let <var>value</var> be the value of <var>el</var>'s <a href=#blocking-attribute id=blocking-attributes:blocking-attribute-4>blocking attribute</a>, or
   the empty string if no such attribute exists.</p>

   <li><p>Set <var>value</var> to <var>value</var>, <a id=blocking-attributes:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>

   <li><p>Let <var>rawTokens</var> be the result of <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=blocking-attributes:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>splitting <var>value</var> on ASCII whitespace</a>.</p>

   <li><p>Return a set containing the elements of <var>rawTokens</var> that are <a href=#possible-blocking-token id=blocking-attributes:possible-blocking-token-4>possible blocking tokens</a>.</p>
  </ol>

  <p>An element is <dfn id=potentially-render-blocking>potentially render-blocking</dfn> if its <a href=#blocking-tokens-set id=blocking-attributes:blocking-tokens-set>blocking tokens set</a>
  contains "<code id=blocking-attributes:blocking-token-render><a href=#blocking-token-render>render</a></code>", or if it is
  <dfn id=implicitly-potentially-render-blocking>implicitly potentially render-blocking</dfn>, which will be defined at the individual
  elements. By default, an element is not <a href=#implicitly-potentially-render-blocking id=blocking-attributes:implicitly-potentially-render-blocking>implicitly potentially render-blocking</a>.</p>

  <h4 id=fetch-priority-attributes><span class=secno>2.4.7</span> Fetch priority attributes<a href=#fetch-priority-attributes class=self-link></a></h4>

  <p>A <dfn id=fetch-priority-attribute>fetch priority attribute</dfn> is an <a id=fetch-priority-attributes:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the
  following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=img/fetchpriority,script/fetchpriority,link/fetchpriority id=attr-fetchpriority-high data-dfn-type=attr-value><code>high</code></dfn>
     <td><dfn id=attr-fetchpriority-high-state>High</dfn>
     <td>Signals a high-priority <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetch-priority-attributes:concept-fetch data-x-internal=concept-fetch>fetch</a> relative to other
     resources with the same <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetch-priority-attributes:concept-request-destination data-x-internal=concept-request-destination>destination</a>.
    <tr><td><dfn data-dfn-for=img/fetchpriority,script/fetchpriority,link/fetchpriority id=attr-fetchpriority-low data-dfn-type=attr-value><code>low</code></dfn>
     <td><dfn id=attr-fetchpriority-low-state>Low</dfn>
     <td>Signals a low-priority <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetch-priority-attributes:concept-fetch-2 data-x-internal=concept-fetch>fetch</a> relative to other
     resources with the same <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetch-priority-attributes:concept-request-destination-2 data-x-internal=concept-request-destination>destination</a>.
    <tr><td><dfn data-dfn-for=img/fetchpriority,script/fetchpriority,link/fetchpriority id=attr-fetchpriority-auto data-dfn-type=attr-value><code>auto</code></dfn>
     <td><dfn id=attr-fetchpriority-auto-state>Auto</dfn>
     <td>Signals automatic determination of <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetch-priority-attributes:concept-fetch-3 data-x-internal=concept-fetch>fetch</a> priority
     relative to other resources with the same <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetch-priority-attributes:concept-request-destination-3 data-x-internal=concept-request-destination>destination</a>.
  </table>

  <p>The attribute's <i id=fetch-priority-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and
  <i id=fetch-priority-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the
  <a href=#attr-fetchpriority-auto-state id=fetch-priority-attributes:attr-fetchpriority-auto-state>Auto</a> state.</p>

  <nav><a href=common-microsyntaxes.html>← 2.3 Common microsyntaxes</a> — <a href=./>Table of Contents</a> — <a href=common-dom-interfaces.html>2.5 Common DOM interfaces →</a></nav>
